<template>
  <div class="app-container">
    <SearchForm
      v-show="showSearch"
      class="card !pb-0 mb-15"
      :form-options="formOptions"
      :btn-items="searchBtns"
      :load-done="loadDone"
      @onSearch="onSearch"
    />
    <SuperTable
      ref="table"
      class="card flex-1 flex flex-col w-full h-full"
      :load-data="loadData"
      row-key="infoId"
      :show-search.sync="showSearch"
      :columns="columns"
      :btn-items="tableBtns"
      is-multiple
      @refreshTable="$refs.table.getList()"
    >
      <el-table-column v-if="columns['infoId'].visible" label="访问编号" align="center" prop="infoId" />
      <el-table-column
        v-if="columns['userName'].visible"
        label="用户名称"
        align="center"
        prop="userName"
        show-overflow-tooltip
        sortable="custom"
        :sort-orders="['descending', 'ascending']"
      />
      <el-table-column v-if="columns['ipaddr'].visible" label="登录地址" align="center" prop="ipaddr" show-overflow-tooltip />
      <el-table-column
        v-if="columns['loginLocation'].visible"
        label="登录地点"
        align="center"
        prop="loginLocation"
        show-overflow-tooltip
      />
      <el-table-column v-if="columns['browser'].visible" label="浏览器" align="center" prop="browser" show-overflow-tooltip />
      <el-table-column v-if="columns['os'].visible" label="操作系统" align="center" prop="os" show-overflow-tooltip />
      <el-table-column v-if="columns['status'].visible" label="登录状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column v-if="columns['msg'].visible" label="操作信息" align="center" prop="msg" show-overflow-tooltip />
      <el-table-column
        v-if="columns['loginTime'].visible"
        label="登录日期"
        align="center"
        prop="loginTime"
        sortable="custom"
        :sort-orders="['descending', 'ascending']"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.loginTime) }}</span>
        </template>
      </el-table-column>
    </SuperTable>
  </div>
</template>

<script>
import { deptTreeSelect } from '@/api/system/user'
import { list } from '@/api/monitor/logininfor'

export default {
  name: 'Index',
  dicts: ['sys_common_status'],
  data() {
    return {
      showSearch: true,
      deptOptions: [],
      // 列信息
      columns: {
        infoId: { key: 'infoId', label: '访问编号', visible: true },
        userName: { key: 'userName', label: '用户名称', visible: true },
        ipaddr: { key: 'ipaddr', label: '登录地址', visible: true },
        loginLocation: { key: 'loginLocation', label: '登录地点', visible: true },
        browser: { key: 'browser', label: '浏览器', visible: true },
        os: { key: 'os', label: '操作系统', visible: true },
        status: { key: 'status', label: '登录状态', visible: true },
        msg: { key: 'msg', label: '操作信息', visible: true },
        loginTime: { key: 'loginTime', label: '登录日期', visible: true }
      },
      queryParams: {
        userName: '',
        ipaddr: '',
        status: '',
        beginTime: '',
        endTime: ''
      },
      loadDone: false, // 列表数据是否完成请求
      // 表格上方按钮配置
      tableBtns: [
        {
          label: '新增',
          permi: ['system:user:add'],
          icon: 'el-icon-plus',
          type: 'primary',
          plain: true,
          disabled: false,
          key: 'onAdd',
          events: {
            click: () => this.onAdd()
          }
        },
        {
          label: '修改',
          permi: ['system:user:edit'],
          icon: 'el-icon-edit',
          type: 'success',
          plain: true,
          disabled: true,
          key: 'onUpdate',
          events: {
            click: val => this.onUpdate(val)
          }
        },
        {
          label: '删除',
          permi: ['system:user:remove'],
          icon: 'el-icon-delete',
          type: 'danger',
          plain: true,
          disabled: true,
          key: 'onDelete',
          events: {
            click: val => this.onDelete(val)
          }
        },
        {
          label: '导入',
          permi: ['system:user:import'],
          icon: 'el-icon-upload2',
          type: 'info',
          plain: true,
          disabled: false,
          key: 'onImport',
          events: {
            // 表格组件中有一个公共导入方法，若需要特殊处理，可在此处方法中处理
            click: () => this.onImport()
          },
          // 导入配置
          upload: this.uploadOptions()
        },
        {
          label: '导出',
          permi: ['system:user:export'],
          icon: 'el-icon-download',
          type: 'warning',
          plain: true,
          disabled: false,
          key: 'onExport',
          events: {
            click: () => this.onExport()
          }
        }
      ]
    }
  },

  computed: {
    formOptions() {
      return {
        labelWidth: '', // 表单label宽度(px)
        data: [
          // 普通输入框配置
          {
            prop: 'userName', // 必填
            element: 'el-input', // 必填
            label: '用户名称', // 若存在 label则 显示 label 标签
            labelWidth: '', // el-form-item 的 label 宽度(px)
            placeholder: '请输入用户名称',
            width: '140px', // 默认宽度 140px
            // rules: [{ required: true, message: '请输入用户名称' }],
            maxlength: 50, // 默认最大长度50
            prefixIcon: '', // 左侧图标值，如 el-icon-search, 开启图标须设置 noClearable: true, 不要和 prepend 同时使用，suffix 同理
            suffixIcon: '', // 右侧图标值
            prependIcon: '', // 输入框前置图标值，
            prependText: '', // 输入框前置文字
            appendIcon: '', // 输入框后置图标值
            appendText: '', // 输入框后置文字
            noClearable: false, // 默认可清空
            disabled: false, // 默认不禁用
            readonly: false, // 默认不只读
            hide: false // 默认不隐藏
          },
          {
            prop: 'ipaddr', // 必填
            element: 'el-input', // 必填
            label: '登录地址', // 若存在 label则 显示 label 标签
            labelWidth: '', // el-form-item 的 label 宽度(px)
            placeholder: '请输入登录地址'
          },

          // 数据字典类型下拉框配置
          {
            prop: 'status',
            element: 'el-select-dict',
            label: '登录状态',
            placeholder: '登录状态',
            noFilterable: false, // 默认可搜索
            options: this.dict.type.sys_common_status, // 必填，须携带具体字典数据
            noClearable: false,
            disabled: false,
            hide: false
          },

          // 普通下拉框配置
          // {
          //   prop: 'isEnable',
          //   element: 'el-select',
          //   label: '用户状态',
          //   placeholder: '用户状态',
          //   // 必填，须携带具体下拉框数据，格式如下
          //   options: [
          //     { label: '启用', value: 1 },
          //     { label: '禁用', value: 0 }
          //   ]
          // },

          // 日期选择器配置
          {
            prop: 'daterange',
            element: 'el-date-picker',
            label: '登录时间',
            width: '230px', // 日期范围默认宽度 230px
            startPlaceholder: '开始日期',
            rangeSeparator: '至',
            endPlaceholder: '结束日期',
            type: 'daterange', // 日期范围选择器 默认: daterange, 可选值: datetimerange
            clearable: true, // 这里可以使用组件默认的清除
            valueFormat: 'yyyy-MM-dd HH:mm:ss' // 日期格式 默认: yyyy-MM-dd, 可选值: yyyy-MM-dd HH:mm:ss
          },

          // 带时间的日期选择器配置
          // {
          //   prop: 'datetimerange',
          //   element: 'el-date-picker',
          //   width: '360px', // 日期时间范围默认宽度 360px
          //   startPlaceholder: '开始日期',
          //   rangeSeparator: '至',
          //   endPlaceholder: '结束日期',
          //   type: 'datetimerange', // 日期范围选择器 默认: daterange, 可选值: datetimerange
          //   valueFormat: 'yyyy-MM-dd HH:mm:ss' // 日期格式 默认: yyyy-MM-dd, 可选值: yyyy-MM-dd HH:mm:ss
          // },

          // 月份范围选择器配置
          // {
          //   prop: 'monthrange',
          //   element: 'el-date-picker',
          //   width: '210px', // 月份范围默认宽度 210px
          //   startPlaceholder: '开始日期',
          //   rangeSeparator: '至',
          //   endPlaceholder: '结束日期',
          //   type: 'monthrange',
          //   valueFormat: 'yyyy-MM'
          // },

          // 其它类型的日期选择器配置
          // {
          //   prop: 'date',
          //   element: 'el-date-picker',
          //   width: '140px', // 其它日期默认宽度 140px，带时间的默认宽度 200px
          //   placeholder: '请选择日期',
          //   type: 'date',
          //   valueFormat: 'yyyy-MM-dd',
          //   pickerOptions: {} // 当前时间日期选择器特有的选项，具体请参考 element-ui 文档
          // },

          // 级联选择器配置
          {
            prop: 'dept',
            element: 'el-cascader',
            width: '240px',
            placeholder: '请选择部门',
            noClearable: false,
            separator: '/', // 级联选择器分隔符，默认 /
            showAllLevels: false, // 输入框中是否显示选中值的完整路径，默认 true
            collapseTags: true, // 多选时是否折叠Tag，默认 false
            filterable: true, // 是否可搜索，默认 false
            options: this.deptOptions, // 必填，须携带具体级联选择器数据
            // 级联选择器特有的选项，具体请参考 element-ui 文档
            props: {
              // multiple: true,
              // checkStrictly: true,
              emitPath: false,
              value: 'id'
            }
          }
        ],
        // 导入配置
        upload: this.uploadOptions()
      }
    },

    searchBtns() {
      return [
        {
          label: '新增',
          icon: 'el-icon-plus',
          plain: true,
          key: 'onAdd'
        },
        {
          label: '导入',
          icon: 'el-icon-upload2',
          type: 'info',
          plain: true,
          key: 'onImport'
        },
        {
          label: '导出',
          icon: 'el-icon-download',
          type: 'warning',
          plain: true,
          key: 'onExport'
        }
      ]
    }
  },

  created() {
    this.getDeptTree()
  },

  mounted() {
    this.onSearch()
  },

  methods: {
    getDeptTree() {
      deptTreeSelect().then(res => {
        // console.log('-------------部门树', res)
        this.deptOptions = res.data || []
      })
    },

    // 导入配置
    uploadOptions() {
      return {
        title: '用户信息', // 必填，弹窗标题&下载模版标题
        url: process.env.VUE_APP_BASE_API + '/system/user/importData', // 必填，上传地址
        templateUrl: 'system/user/importTemplate', // 必填，模版下载地址
        showUpdate: true, // 是否显示更新数据选项
        open: true // 必填，打开弹窗
      }
    },

    async loadData({ pageNum, pageSize }) {
      this.loadDone = false
      // prettier-ignore
      return list({ pageNum, pageSize, ...this.queryParams }).then(res => {
        // console.log('列表', res)
        return {
          list: res.rows || [],
          total: res?.total || 0
        }
      }).finally(() => (this.loadDone = true))
    },

    onSearch(val) {
      console.log('查询参数', val)
      this.queryParams.userName = val?.userName
      this.queryParams.ipaddr = val?.ipaddr
      this.queryParams.status = val?.status
      this.queryParams.dept = val?.dept
      this.queryParams.beginTime = val?.daterange?.length ? val?.daterange[0] : ''
      this.queryParams.endTime = val?.daterange?.length ? val?.daterange[1] : ''
      this.$refs.table?.getList()
    },

    onAdd() {
      console.log('-----------onAdd----------')
    },
    onUpdate(val) {
      console.log('-----------onUpdate----------', val)
    },
    onDelete(val) {
      console.log('-----------onDelete----------', val)
    },
    onImport() {
      console.log('-----------onImport----------')
    },
    onExport() {
      console.log('-----------onExport----------')
    }
  }
}
</script>
